<template>
  <div class="layout-pd">
    <zh-space style="padding-top: 10px">
      <zh-card title="">
        <zh-form ref="processForm" :model="state.queryParam">
          <zh-form-select
            prop="instanceState"
            label="流程状态"
            placeholder="单选"
            :options="[
              { dictKey: 0, dictValue: '审批中' },
              { dictKey: 1, dictValue: '审批通过' },
              { dictKey: 2, dictValue: '审批拒绝' },
              { dictKey: 3, dictValue: '审批撤销' },
              { dictKey: 4, dictValue: '超时结束' },
              { dictKey: 5, dictValue: '强制终止' },
            ]"
            v-model="state.queryParam.instanceState"
          ></zh-form-select>
          <zh-form-select
            prop="processKey"
            label="业务名称"
            placeholder="单选"
            :options="state.dictData.processNameList"
            v-model="state.queryParam.processKey"
          ></zh-form-select>
          <template v-if="state.advanced">
            <zh-form-input
              prop="businessKey"
              label="业务流水号"
              placeholder="精确匹配"
              v-model="state.queryParam.businessKey"
            ></zh-form-input>
          </template>
          <zh-form-query
            v-model="state.advanced"
            :form-ref="processForm"
            :table-ref="processTable"
          ></zh-form-query>
        </zh-form>
      </zh-card>
      <zh-table
        ref="processTable"
        title=""
        funcCode="flowLongQuery005"
        :columns="state.tableColumn"
        :radio-config="{ trigger: 'row' }"
        :disabled="false"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <template #busi_title="{ row }">
          <el-link @click="handleClickTitle(row)" type="primary">{{
            row.processName
          }}</el-link></template
        >
      </zh-table>
    </zh-space>

    <flow-detail-drawer
      :visible="visible"
      :instance-id="state.currentInstanceId"
      :business-key="state.currentBusinessKey"
      :instance-state="state.instanceState"
      :process-type="state.processType"
      @update:modelValue="
        (val) => {
          return (visible = val);
        }
      "
      @refresh="refreshList"
    />
  </div>
</template>

<script lang="ts" setup name="copyToMe">
import flowDetailDrawer from "../component/flowDetailDrawer.vue";
//------------------定义子组件---------------------------
import { ref } from "vue";
import {useRouter} from "vue-router";
const processTable = ref<any>({});
const flowLongPage = ref<any>({});

//------------------内部变量定义-------------------------
const visible = ref(false);
const router = useRouter();
const state = reactive({
  dictData: {} as any,
  visible: false,
  processNameVisible: false,
  form: null,
  processData: {} as any,
  // 高级搜索 展开/关闭
  advanced: false,
  // 查询参数
  queryParam: {
    docType: "4",
    processKey: "",
    businessScope: 1
  } as any,
  // 表头
  loading: false,
  tablePage: {
    total: 0,
    currentPage: 1,
    pageNum: 1,
    pageSize: 20,
  },
  currentInstanceId: "",
  currentBusinessKey: "",
  instanceState: 0,
  processType: -1,
  tableColumn: [
    { type: "seq", width: 80, fixed: "left", align: "center", title: "序号" },
    {
      field: "operationTypeName",
      title: "业务名称",
      align: "center",
      fixed: "left",
      width: 200,
      editRender: {},
      slots: {
        // 使用插槽模板渲染
        default: "busi_title",
        edit: "busi_title",
      },
    },
    { field: "currentNode", title: "当前节点", align: "center", width: 150 },
    { field: "instanceStateName", title: "流程状态", align: "center", width: 120 },
    { field: "businessKey", title: "业务流水号", align: "center", width: 200 },
    { field: "createBy", title: "发起人", align: "center", width: 120 },
    { field: "orgName", title: "发起人所在组织", align: "center", width: 250 },
    { field: "createTime", title: "发起时间", align: "center" },
  ],
  tableData: [],
  selectRow: null as any,
  modalTitle: "操作",
  processId: null as any,
  processOperationTypeVisible: false,
  statusData: [
    { dictKey: "1", dictValue: "启用" },
    { dictKey: "0", dictValue: "禁用" },
  ],
});

//------------------定义调用方法-------------------------
function handleClickTitle(row) {
  if(row.processType === 3){
    //跳转
    router.push({path: '/system/wtTask',query: {taskId: row.processKey.replace("wtTask#","")}});
    return;
  }
  state.currentInstanceId = String(row.id);
  state.currentBusinessKey = row.businessKey;
  state.instanceState = row.instanceState;
  state.processType = row.processType;
  visible.value = true;
}
function findBusiData() {
  processTable.value.query(state.queryParam);
}
function refreshList() {
  visible.value = false
  processTable.value.refresh(state.queryParam);
}
function handleCurrentChange(row) {
  state.selectRow = row;
  state.processId = row.processId;
}

//------------------初始化------------------------------

// 数据字典初始化
const initDict = () => {
  $api.common.send
      .post('flowLongQuery010', {})
      .then((res) => {
        state.dictData.processNameList = res.result
        state.dictData.processNameList.forEach(item => {
          item.dictValue = item.processName
          item.dictKey = item.processKey
        })
      })
      .catch(() => {});
};

onMounted(() => {
  nextTick(() => {
    initDict();
    findBusiData();
  });
});
</script>
<style lang="scss" scoped></style>
